<template>
  <div class="GoldCoinRecharge">
    <div class="GoldCoinRechargeBalance">
      <div class="GoldCoinRechargeBg">
        <div class="login_div">
          <p class="login_p" @click="goLogin">{{ login }}</p>
          <img @click="gouWenhao" src="../assets/image/wenhao.png" alt="" />
        </div>
        <div class="one">
          <img src="../assets/image/jinbi.png" alt="" />
          <span class="jinbitxt">{{ userCoin }}</span>
        </div>
      </div>
    </div>

    <span class="coinSpan" v-if="bol" @click="jinbiJilu"> 金币记录 </span>
    <div v-else class="coinSpanKong"></div>
    <!-- <div class="GoldCoinRechargePay">
      <div :class="{ activeB: activeB == 1 }" @click="selectedB(1)">
        <img src="../assets/image/zfbB.png" alt="" />
      </div>
      <div :class="{ activeB: activeB == 2 }" @click="selectedB(2)">
        <img src="../assets/image/wxB.png" alt="" />
      </div>
    </div> -->
    <div class="payType">
      <div
        class="item"
        @click="selectedB(2)"
        :class="{ actived: activeB == 2 }"
      >
        <div class="li">
          <div class="left">
            <img src="../assets/image/wxpay.png" alt="" />
            微信
          </div>
          <div class="right" v-if="activeB == 1"></div>
          <img v-else src="../assets/image/actived.png" alt="" />
        </div>
      </div>
      <div
        class="item"
        @click="selectedB(1)"
        :class="{ actived: activeB == 1 }"
      >
        <div class="li">
          <div class="left">
            <img src="../assets/image/alpay.png" alt="" />
            支付宝
          </div>
          <div class="right" v-if="activeB == 2"></div>
          <img v-else src="../assets/image/actived.png" alt="" />
        </div>
      </div>
    </div>
    <div class="moneyList">
      <div class="moneyItem" v-for="i in moneyList" :key="i.index">
        <div class="moneyItem_one">
          <img src="../assets/image/jinbi.png" alt="" />
          <span
            ><span class="b">{{ i.coin }}</span
            ><b v-if="i.label !== ''">{{ i.label }}</b></span
          >
        </div>
        <div class="moneyItem_two">
          <p @click="selected(i.id)">￥{{ i.price }}</p>
        </div>
      </div>
    </div>

    <!-- <div class="GoldCoinRechargeBtn" @click="submit">
      <p>提交</p>
    </div> -->
    <div class="GoldCoinRechargeBtn">
      <h3 style="color: #666666">
        客服QQ：<span class="qq_span">3530392015</span>
      </h3>
    </div>

    <div class="GoldCoinRechargeBtn">
      <span class="GoldCoinRechargeSpan" @click="agreement">服务协议</span>
    </div>
  </div>
</template>

<script>
import { prepaidPrepaidList, OrderUpCreate, userUserinfo } from "../api/reply";
export default {
  data() {
    return {
      userCoin: 0,
      moneyList: [],
      active: "",
      activeB: "1",
      isLogin: false,
      login: "登陆",
      moneyList: [
        { id: "666666", coin: "10", label: "特惠", price: "1" },
        { id: "666666", coin: "66", label: "特惠", price: "6" },
        { id: "666666", coin: "188", label: "特惠", price: "18" },
        { id: "666666", coin: "300", label: "特惠", price: "30" },
        { id: "666666", coin: "666", label: "特惠", price: "66" },
        { id: "666666", coin: "999", label: "特惠", price: "99" },
        { id: "666666", coin: "1688", label: "特惠", price: "168" },
      ],
      bol: true,
    };
  },
  methods: {
    async selected(id) {
      // this.$toast.success("内容");
      if (this.login == "登陆") {
        this.$router.push("/Login");
        return;
      }
      this.active = id;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      const res = await OrderUpCreate({
        prepaid: this.active, //套餐id
        payType: this.activeB, //发起支付类型（1：支付宝   2：微信   3：IOS）
        openType: 2, //打开类型（1：app   2：h5）
      });
      this.$toast.clear();
      if (res.code == 0) {
        if (this.activeB == 1) {
          //把订单id存在本地，支付成功页面请求刷新接口静默刷新
          localStorage.setItem("order_id", res.data.orderDetails.order_id);
          const div = document.createElement("div");
          div.innerHTML = res.data.orderDetails.order_details; //res.data是返回的表单
          document.body.appendChild(div);
          document.forms.alipaysubmit.submit();
        }
        if (this.activeB == 2) {
          let url = res.data.orderDetails.order_details.mweb_url;
          console.log(url);
          window.location.href = url;
        }
      } else {
        this.$toast({
          message: res.msg,
          position: "bottom",
        });
      }
    },
    selectedB(i) {
      if (this.login == "登陆") {
        this.$router.push("/Login");
      }
      this.activeB = i;
    },
    // async submit() {
    //   const res = await OrderUpCreate({
    //     prepaid: this.active, //套餐id
    //     payType: this.activeB, //发起支付类型（1：支付宝   2：微信   3：IOS）
    //     openType: 2, //打开类型（1：app   2：h5）
    //   });
    //   // console.log(res);
    //   const div = document.createElement("div");
    //   div.innerHTML = res.data.orderDetails.order_details; //res.data是返回的表单
    //   document.body.appendChild(div);
    //   document.forms.alipaysubmit.submit();
    // },
    goLogin() {
      if (this.login == "登陆") {
        this.$router.push("/Login");
      }
    },

    //点击问号
    gouWenhao() {
      this.$router.push("/CommonProblem");
    },
    //金币记录
    jinbiJilu() {
      if (this.login == "登陆") {
        this.$router.push("/Login");
      } else {
        this.$router.push("/Goldrecord?gold=" + this.userCoin);
      }
    },
    // 获取个人信息
    async getUserInfo() {
      const res = await userUserinfo();
      if (res.code == 0) {
        this.userCoin = res.data.goldCoin;
        this.login = "ID:" + res.data.idCode;
        console.log(res);
        // this.isBindAliPay = res.data.ext.isBindAliPay;
      }
      // else {
      //   this.$router.push(`/Login?path=${this.$route.fullPath}`);
      // }
    },
    agreement() {
      this.$router.push("/ServiceAgreement");
    },
  },
  async created() {
    //判断环境
    var u = navigator.userAgent;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      this.bol = false;
    } else if (isiOS) {
      this.bol = true;
    }
    // if (!localStorage.getItem("access_token")) {
    //   this.login = "登陆";
    // } else {
    //列表请求
    if (this.$route.query.token) {
      localStorage.setItem("access_token", this.$route.query.token);
    }
    //金币列表
    const res = await prepaidPrepaidList({ type: 1 });
    if (res.code == 0) {
      this.moneyList = res.data;
      // this.login = "ID:" + this.$route.query.id;
    }
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
.GoldCoinRecharge {
  background: #ffffff;
  padding: 0px 25px;
  min-height: 100vh;
  .GoldCoinRechargeBalance {
    width: 100%;
    padding-top: 30px;
    .GoldCoinRechargeBg {
      background: url("../assets/image/jinbiBg.png") no-repeat;
      background-size: 100%;
      width: 100%;
      height: 98px;
      color: white;
      .login_div {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        font-size: 12px;
        img {
          width: 16px;
          height: 16px;
        }
      }
      .one {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
          height: 20px;
        }
        span {
          font-size: 24px;
        }
      }
      .two {
        display: flex;
        justify-content: flex-end;
        p {
          width: 75px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: rgba(255, 225, 255, 0.15);
          margin: 10px;
          border-radius: 25px;
          font-size: 12px;
        }
      }
    }
  }
  .coinSpan {
    color: #666666;
    text-decoration: underline;
    display: flex;
    justify-content: flex-end;
    margin: 5px 0px;
    font-size: 13px;
  }
  .coinSpanKong {
    height: 20px;
  }
  .moneyList {
    margin-top: 30px;
    .moneyItem {
      display: flex;
      color: white;
      margin-top: 20px;
      .moneyItem_one {
        display: flex;
        align-items: center;
        width: 70%;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        span {
          font-size: 20px;
          display: flex;
          align-items: center;
          b {
            position: relative;
            font-size: 11px;
            display: inline-block;
            width: 60px;
            height: 20px;
            // top: -20px;
            color: #eb644f;
            text-align: center;
            line-height: 20px;
            // background: url("../assets/image/tehui.png") no-repeat;
            background: #ffcccb;
            // background-size: 100%;
            border-radius: 10px 10px 10px 0;
          }
          .b {
            margin-right: 5px;
            color: #333333;
            font-size: 20px;
            font-weight: 600;
          }
        }
      }
      .moneyItem_two {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        p {
          background: linear-gradient(90deg, #d853ff 0%, #7439ff 100%);
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid transparent;
          border-radius: 25px;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
  .GoldCoinRechargePay {
    display: flex;
    margin-top: 30px;
    justify-content: space-around;
    div {
      width: 40%;
      display: flex;
      justify-content: center;
      height: 60px;
      align-items: center;
      img {
        width: 90%;
        height: 50px;
      }
    }
    .activeB {
      background: url("../assets/image/kuang.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .GoldCoinRechargeBtn {
    display: flex;
    justify-content: center;
  }
  // .kf {
  //   font-size: 32px;

  //   font-weight: normal;

  //   color: #666666 !important;
  //   .qq_span {
  //     color: #666666 !important;
  //   }
  // }
  .GoldCoinRechargeSpan {
    text-decoration: underline;
    color: #666666;
    font-size: 16px;
    padding-bottom: 30px;
    margin-top: 10px;
  }

  h3 {
    color: #c4c0d5;
    margin-top: 30px;
    font-size: 16px;
    color: #666666 !important;
  }
  .jinbitxt {
    margin-left: 5px;
  }
  .payType {
    display: flex;
    justify-content: space-between;
    .item {
      width: 155px;
      height: 44px;
      border-radius: 22px;
      border: 2px solid #ccc;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .li {
        display: flex;
        width: 150px;
        justify-content: space-between;
        .left {
          margin-left: 20px;
          display: flex;
          align-items: center;

          img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
          font-size: 15px;
          color: #333333;
        }
        .right {
          width: 20px;
          height: 20px;
          border: 2px solid #ccc;
          border-radius: 50%;
          margin-right: 10px;
        }
        img {
          width: 21px;
          height: 21px;
          margin-right: 10px;

          // background: #8a37f8;
        }
      }
    }
    .actived {
      border-color: #8a37f8 !important;
    }
  }
}
</style>